<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <title>商品列表</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

</head>
<body>

<div class="container-fluid">
    <!-- 搜索-->
<!--    <div class="row">-->
<!--        <div class="col-md-10 col-md-offset-1">-->
<!--            <form id="searchForm" action="127.0.0.1"></form>-->
<!--            &lt;!&ndash; 按钮&ndash;&gt;-->
<!--            <button type="button" class="btn btn-primary" id="toAdd">添加</button>-->

<!--        </div>-->
<!--    </div>-->

    <!-- 头部-->
    <div class="row">
        <div class="col-md-2 col-md-offset-10">
        <!-- 按钮-->
            <button type="button" class="btn btn-primary" id="toAdd">添加</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>

    <!-- 列表-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>ID</td>
                    <td>类别</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>折扣价</td>
                    <td>卖点</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>操作</td>
                </tr>
                <tr th:each="product : ${pageInfo.list}">
                    <td th:id="${product.id}"><input type="checkbox"></td>
                    <td th:text="${product.id}"></td>
                    <td th:text="${product.typeName}"></td>
                    <td th:text="${product.name}"></td>
                    <td th:text="${product.price}"></td>
                    <td th:text="${product.salePrice}"></td>
                    <td th:text="${product.salePoint}"></td>
                    <td th:text="${product.image}"></td>
                    <td th:text="${product.stock}"></td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm update" th:id="${product.id}">修改</button>
                        <button type="button" class="btn btn-danger btn-sm delete" th:id="${product.id}">删除</button>
                    </td>
                </tr>
            </table>
        </div>

        <!-- 信息-->
        <div class="col-md-6">
            当前第<span th:text="${pageInfo.pageNum}"></span>页、共<span th:text="${pageInfo.total}"></span>条记录，共<span th:text="${pageInfo.pages}"></span>页
        </div>

        <!-- 工具-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a th:href="|product/page/${pageInfo.prePage}/${pageInfo.pageSize}|" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li th:each="num : ${pageInfo.navigatepageNums}" th:class="${num == pageInfo.pageNum ? 'active' : ''}">
                        <a th:href="|product/page/${num}/${pageInfo.pageSize}|" th:text="${num}"></a>
                    </li>
                    <li>
                        <a th:href="|product/page/${pageInfo.nextPage}/${pageInfo.pageSize}|" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!--添加层-->
    <div class="modal fade" tabindex="-1" role="dialog" id="addModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加商品</h4>
                </div>
                <div class="modal-body">
                    <!--提交添加表单-->
                    <form class="form-horizontal" id="addForm" action="/product/add" method="post">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.name" id="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="typeId" class="col-sm-2 control-label">类别ID</label>
                            <div class="col-sm-10">
                                <input type="number" min="-1" class="form-control" name="product.typeId" id="typeId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="typeName" class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.typeName" id="typeName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price" class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-10">
                                <input type="number" min="0" class="form-control" name="product.price" id="price">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="salePrice" class="col-sm-2 control-label">折扣价</label>
                            <div class="col-sm-10">
                                <input type="number" min="0" class="form-control" name="product.salePrice" id="salePrice">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image" class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.image" id="image">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="stock" class="col-sm-2 control-label">库存</label>
                            <div class="col-sm-10">
                                <input type="number" min="1" class="form-control" name="product.stock" id="stock">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="salePoint" class="col-sm-2 control-label">商品卖点</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.salePoint" id="salePoint"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="productDesc" class="col-sm-2 control-label">商品详细描述</label>
                            <div class="col-sm-10">
                                <textarea rows="4" class="form-control" name="productDesc" id="productDesc"></textarea>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="addProduct">添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--修改层-->
    <div class="modal fade" tabindex="-1" role="dialog" id="updateModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改商品</h4>
                </div>
                <div class="modal-body">
                    <!--提交添加表单-->
                    <form class="form-horizontal" id="updateForm" action="/product/uptate" method="post">
                        <div class="form-group">
                            <label for="name_update" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.name" id="name_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="typeId_update" class="col-sm-2 control-label">类别ID</label>
                            <div class="col-sm-10">
                                <input type="number" min="-1" class="form-control" name="product.typeId" id="typeId_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="typeName_update" class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.typeName" id="typeName_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price_update" class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-10">
                                <input type="number" min="0" class="form-control" name="product.price" id="price_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="salePrice_update" class="col-sm-2 control-label">折扣价</label>
                            <div class="col-sm-10">
                                <input type="number" min="0" class="form-control" name="product.salePrice" id="salePrice_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image_update" class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.image" id="image_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="stock_update" class="col-sm-2 control-label">库存</label>
                            <div class="col-sm-10">
                                <input type="number" min="1" class="form-control" name="product.stock" id="stock_update">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="salePoint_update" class="col-sm-2 control-label">商品卖点</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="product.salePoint" id="salePoint_update"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="productDesc_update" class="col-sm-2 control-label">商品详细描述</label>
                            <div class="col-sm-10">
                                <textarea rows="4" class="form-control" name="productDesc" id="productDesc_update"></textarea>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="addProduct">添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("#toAdd").click(function () {
            $("#addModal").modal({
                backdrop: 'static',
                keyboard: 'true'
            })
        });

        //添加
        $("#addProduct").click(function () {
            let a = 1;
            $("#addForm input").each(function (key, value) {
                if (value.value.trim() === "") {
                    a = 2;
                }
            });
            if (a === 1) {
                $("#addForm").submit();
            }
        });

        // 添加修改和删除事件
        $(".update").click(function () {
            $("#updateModal").modal({
                backdrop: 'static',
                keyboard: 'true'
            })
        });
        $(".delete").click(function () {
            let temp = this;
            $.ajax(
                {
                    type: "DELETE",
                    url: "product/deleteById",
                    data: "id=" + $(this).attr("id"),
                    success: function () {
                        console.log($(this).attr("id") + "删除成功");
                        console.log($(temp).parent().parent().remove());

                    }
                }
            )
        });

        setInterval(function () {
            $.ajax(
                {
                    type: "POST",
                    url: "/live/dms/send_message?token=",
                    data: "topic=live_chapter_1580&message=666666&chapterId=1580",
                    success: function (data) {
                        console.log(data);

                    }
                }
            )
        }, 1000);


    })
</script>

</body>
</html>